---
title: Material Top Tabs
description: A navigator that lets you switch between different routes by tapping the tabs or swiping horizontally.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside } from '@astrojs/starlight/components';

<LinkButton target="_blank" href="https://reactnavigation.org/docs/material-top-tab-navigator/">
  @react-navigation/material-top-tabs
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/material-top-tabs">
  Demo
</LinkButton>

<br />

A navigator that lets you switch between different routes by tapping the tabs or swiping horizontally.

### Installation

**Install <a target="_blank" href="https://reactnavigation.org/docs/material-top-tab-navigator/">@react-navigation/material-top-tabs</a> dependencies**

```bash
npx expo install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view
```

<Aside>
    The code provided below is for `expo-router`. If you are using `react-navigation` directly, you can follow the official documentation and apply the same props.
</Aside>

<br />

Copy/paste the following code to a `_layout.tsx` file and **adjust all the `MaterialTopTabs.Screen` to your project's screens**:


<Code code={
    `
import type {
  MaterialTopTabNavigationEventMap,
  MaterialTopTabNavigationOptions,
} from '@react-navigation/material-top-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {
  useTheme,
  type ParamListBase,
  type TabNavigationState,
} from '@react-navigation/native';
import { withLayoutContext } from 'expo-router';

const { Navigator } = createMaterialTopTabNavigator();

const MaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(Navigator);

export default function MaterialTopTabsLayout() {
  const { colors } = useTheme();
  return (
    <MaterialTopTabs
      initialRouteName='index'
      screenOptions={{
        tabBarActiveTintColor: colors.text,
        tabBarInactiveTintColor: 'grey',
        tabBarLabelStyle: {
          fontSize: 14,
          textTransform: 'capitalize',
          fontWeight: 'bold',
        },
        tabBarIndicatorStyle: {
          backgroundColor: colors.text,
        },
        tabBarScrollEnabled: true,
        tabBarItemStyle: { width: 'auto', minWidth: 100 },
      }}
    >
      <MaterialTopTabs.Screen
        name='index'
        options={{
          title: 'Blue',
        }}
      />
      <MaterialTopTabs.Screen
        name='red'
        options={{
          title: 'Red',
        }}
      />
      <MaterialTopTabs.Screen
        name='green'
        options={{
          title: 'Green',
        }}
      />
      <MaterialTopTabs.Screen
        name='purple'
        options={{
          title: 'Purple',
        }}
      />
    </MaterialTopTabs>
  );
}
    `
} lang="tsx" title="_layout.tsx" />

Just as other navigators with `expo-router`, the default exported components in the same folder will be their own screen in the navigator.